<!-- 
@author wsq
@date  2016-11-13 
@保险公司 不同的入口对应不同的功能 通过urlfrom =xxxx 标记入口
-->
<template>
	<div v-on:click='switchFn' class="c_company">
      <div class="icon_box"><img class="icon-company" v-on:error='imgError($event)' v-bind:src='company.iconUrl' ></div>
      <span class="iconfont">{{company.iconfont}}</span>
    	<span>{{company.abbrName}}</span>
	</div>
</template>

<script>  
export default {
  name: 'company',
  props: ['company'],
  data(){
    return {
      firstFont:false,
    }
  },
  methods: {
    addinsurance: function () {
      /*传给编辑保单的参数
        公司名称：sessionStorage.companyName
        产品名称：sessionStorage.productName
        保险类型：sessionStorage.insuranceType
      */
      let company =  Object.assign({},this.company)
          window.sessionStorage.companyId = company.companyId || "";
          window.sessionStorage.companyName = company.abbrName || "";
      this.$router.push({ path: 'insProductList', query: { companyId: company.companyId,companyName:company.abbrName }})
    },
    serviceAdd:function(){
        let company = Object.assign({},this.company)
        let url = "patoa://pingan.com/lbs/insurance?" + "company_name=" + company.abbrName + "&" + "service_call=" + company.moblie;
        window.YztApp.openNaiveURL(url)
    },
    serviceHotline:function(){
      //native提供方法  showDialPopup
      let company = Object.assign({},this.company)
      let moblie =  company.moblie || "";
      window.YztApp.showDialPopup(moblie)
    },
    switchFn:function(){
      let query = this.$route.query.urlfrom
      window.YztApp.ubt('我的保险','保险公司列表页_点击_保险公司名称',{'保险公司名称':this.company.abbrName})
      switch(query){
        case 'addinsurance':
          this.addinsurance()
          break;
        case 'serviceAdd':
          this.serviceAdd()
          break ;
        case 'serviceHotline':
          this.serviceHotline()
          break;
        default:
          this.addinsurance()

      }
    
    },
    imgError:function(event){
       this.removeEl(event.target.parentNode);
       this.firstFont = true;
    },
    removeEl:function(el){
      var parentEl = el.parentNode
      if(parentEl) parentEl.removeChild(el) 
    }

  },
  mounted:function(){
    
  }
}
</script>

<style>
.c_company{
display: box;
display: -webkit-box;
-webkit-box-align:center;
box-align:center;
height: 1.28rem;
font-size: 0.426667rem;
background-color: #fff;
position: relative;
z-index: 1;
color: #4A4A4A;
}

.c_company .icon_box{
/* display: block; */
display: box;
display: -webkit-box;
box-align: center;
box-pack: center;
-webkit-box-align: center;
-webkit-box-pack: center;

position: absolute;
top: 50%;
transform: translate(0, -50%);
left: 0.373333rem;
background-color: #fff;

}

[data-dpr="1"] .c_company .icon_box {
    width: 30px;
    height:100%;
}
[data-dpr="2"] .c_company .icon_box {
    width: 60px;
    height: 100%;
}
[data-dpr="3"] .c_company .icon_box {
    width: 90px;
    height: 100%;
}
.c_company .icon-company{
  display: block;
  width:90%;

}
.c_company .iconfont{
display: box;
display: -webkit-box;
box-align: center;
box-pack: center;
-webkit-box-align: center;
-webkit-box-pack: center;
box-sizing: border-box;
-webkit-box-sizing: border-box;
background-color: #fff;
margin: 0 0.32rem 0 0.373333rem;
color: #4A90E2;
border: 1px solid #4A90E2;
border-radius: 100%;
font-weight: bold;
overflow: hidden;
}
[data-dpr="1"] .c_company .iconfont {
    font-size: 14px;
    width: 28px;
    height: 28px;
    line-height: 26px;
}
[data-dpr="2"] .c_company .iconfont {
    width: 56px;
    height: 56px;
    font-size: 28px;
    line-height: 54px;
}
[data-dpr="3"] .c_company .iconfont {
    width: 84px;
    height: 84px;
    font-size: 42px;
    line-height: 82px;
}
</style>